<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%"
    :span-method="arraySpanMethod"
  >
    <el-table-column
      label="名称"
      width="180"
    ><template v-slot="scope">
      <span style="font-weight: bold;">{{ scope.row.name }}</span>
    </template>
    </el-table-column>
    <el-table-column
      label="内容"
    ><template v-slot="scope">
      <span style="font-weight: bold;">{{ scope.row.desc }}</span>
    </template>
    </el-table-column>
    <el-table-column
      label="A"
      width="180"
    >
      <template v-slot="scope">
        <span style="font-weight: bold;"><el-input v-model="scope.row.A" :disabled="scope.row.disable" size="small" placeholder="请输入内容" /></span>
      </template>
    </el-table-column>
    <el-table-column
      label="B"
      width="180"
    >
      <template v-slot="scope">
        <span style="font-weight: bold;"><el-input v-model="scope.row.B" :disabled="scope.row.disable" size="small" placeholder="请输入内容" /></span>
      </template>
    </el-table-column>
    <el-table-column
      label="C"
      width="180"
    >
      <template v-slot="scope">
        <span style="font-weight: bold;"><el-input v-model="scope.row.C" :disabled="scope.row.disable" size="small" placeholder="请输入内容" /></span>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
/**
 * @Date: 2022/4/4
 */

export default {
  name: 'Question8',
  model: {
    prop: 'modelValue',
    event: 'change'
  },
  props: {
    modelValue: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      startWatchFlag: false,
      tableData: [{
        name: '终检面板安装',
        desc: '二次接线正确、无松动；二次耐压测试合格；机械操作合格；底盘车行程检测；面板安装后手动分合闸3次；铭牌参数正确；外观无缺陷；梅花触头内侧涂抹凡士林；梅花触头使用保鲜膜或包装袋进行包裹防止氧化。'
      }, {
        desc: '回路电阻值',
        A: '',
        B: '',
        C: '',
        disable: false
      }]
    }
  },
  watch: {
    tableData: {
      handler(newVal, oldVal) {
        if (!this.startWatchFlag) return
        const rt = {}
        let i = 1
        newVal.forEach((item) => {
          if (item.disable === false) {
            rt[`input${i}_1`] = item.A
            rt[`input${i}_2`] = item.B
            rt[`input${i}_3`] = item.C
            i++
          }
        })
        let flag = false
        // console.log(rt)
        for (let key in rt) {
          if (rt[key] === '') {
            flag = true
            break
          }
        }
        if (flag) {
          rt.fe = '未填写完整'
        } else {
          rt.fe = ''
        }
        this.$emit('change', rt)
      },
      deep: true
    }
  },
  created() {
    if (Object.keys(this.modelValue).length === 0) {
      this.$emit('change', { 'input1_1': '', 'input1_2': '', 'input1_3': '' })
    } else {
      let i = 1
      this.tableData.forEach((item) => {
        if (item.disable === false) {
          item.A = this.modelValue[`input${i}_1`]
          item.B = this.modelValue[`input${i}_2`]
          item.C = this.modelValue[`input${i}_3`]
          i++
        }
      })
    }
    this.startWatchFlag = true
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex === 0) {
          return [6, 1]
        } else {
          return [0, 0]
        }
      }
      if (rowIndex === 0) {
        if (columnIndex === 1) {
          return [1, 4]
        } else {
          return [0, 0]
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
